<template> <a-card :bordered="false" :class="'cust-erp-sub-tab'"> <!-- 操作按钮区域 --> <div class="table-operator" v-if="mainId"> <a-button v-has="'inventoryDetail:add'" @click="handleAdd" type="primary" icon="plus">新增</a-button> <a-button type="primary" icon="download" @click="handleExportXls('库存详情')">导出</a-button> </div> <!-- table区域-begin --> <div> <a-table ref="table" size="middle" bordered rowKey="id" class="j-table-force-nowrap" :scroll="{x:true}" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" @change="handleTableChange"> <span slot="inventoryStatus_dictText" slot-scope="inventoryStatus_dictText"> <a-tag :key="inventoryStatus_dictText" :color="getStatusColor(inventoryStatus_dictText)"> {{ inventoryStatus_dictText }} </a-tag> </span> <span slot="companyCode" slot-scope="companyCode"> <a-tag :key="companyCode" color="blue"> {{ solutionCompany(companyCode) }} </a-tag> </span> <span slot="zoneCode" slot-scope="zoneCode"> <a-tag :key="zoneCode" color="blue"> {{ solutionZoneCode(zoneCode) }} </a-tag> </span> </a-table> </div> <inventoryDetail-modal ref="modalForm" @ok="modalFormOk" :mainId="mainId"></inventoryDetail-modal> </a-card> </template> <script> import { JeecgListMixin } from '@/mixins/JeecgListMixin' import InventoryDetailModal from '../modules/InventoryDetailModal' import { getCompanyList, getZoneList } from '@/api/api' export default { name: 'InventoryDetailSubTable', mixins: [JeecgListMixin], components: { InventoryDetailModal }, props: { mainId: { type: String, default: '', required: false } }, watch: { mainId: { immediate: true, handler(val) { if (!this.mainId) { this.clearList() } else { this.queryParam['zoneCode'] = val.split("_")[0]; this.queryParam['materialCode'] = val.split("_")[1]; this.loadData(1) } } } }, data() { return { description: '库存物料汇总详情页面', disableMixinCreated: true, companyList: [], zoneList: [], // 表头 columns: [ { title: '库存详情ID', align: 'center', dataIndex: 'id', // fixed: 'left', // width: 100, }, { title: '货主', align: 'center', dataIndex: 'companyCode', key: 'companyCode', scopedSlots: { customRender: 'companyCode' } }, { title: '库区', align: 'center', dataIndex: 'zoneCode', key: 'zoneCode', scopedSlots: { customRender: 'zoneCode' } }, { title: '库位编码', align: 'center', dataIndex: 'locationCode' }, { title: '容器编码', align: "center", dataIndex: 'containerCode' }, { title: '序列号', align: 'center', dataIndex: 'sn' }, { title: '物料编码', align: 'center', dataIndex: 'materialCode' }, { title: '物料名称', align: 'center', dataIndex: 'materialName' }, { title: '物料单位', align: 'center', dataIndex: 'materialUnit' }, { title: '数量', align: 'center', dataIndex: 'qty' }, { title: '任务锁定数量', align: 'center', dataIndex: 'taskQty' }, { title: '库存状态', align: 'center', dataIndex: 'inventoryStatus_dictText', scopedSlots: {customRender: 'inventoryStatus_dictText'} }, { title: '容器状态', align: 'center', dataIndex: 'containerStatus_dictText' }, { title: '批次', align: "center", dataIndex: 'batch' }, { title: '入库日期', align: "center", dataIndex: 'receiptDate' }, { title: '库龄(天)', align: 'center', dataIndex: 'inventoryAge' }, { title: '创建人', align: 'center', dataIndex: 'createBy' }, { title: '创建日期', align: 'center', dataIndex: 'createTime' }, { title: '更新人', align: 'center', dataIndex: 'updateBy' }, { title: '更新日期', align: 'center', dataIndex: 'updateTime' } ], url: { list: '/InventoryMaterialSummary/inventoryMaterialSummary/inventoryMaterialSummaryChild', exportXlsUrl: '/InventoryMaterialSummary/inventoryMaterialSummary/exportXls', importExcelUrl: 'InventoryMaterialSummary/inventoryMaterialSummary/importExcel' }, dictOptions: { containerStatus: [] } } }, created() { this.loadFrom(); }, computed: { importExcelUrl() { return `${window._CONFIG['domianURL']}/${this.url.importUrl}/${this.mainId}` } }, methods: { getStatusColor(status) { const colors = { '良品': 'green', '报废品': 'purple', '待确认 ': 'grey', '次品': 'red', default: 'blue' }; return colors[status] || colors.default; }, loadFrom() { getCompanyList().then(res => { if (res.success) { this.companyList = res.result } }) getZoneList().then(res => { if (res.success) { this.zoneList = res.result } }) }, solutionCompany(value) { let actions = [] Object.keys(this.companyList).some(key => { if (this.companyList[key].code === '' + value) { actions.push(this.companyList[key].name) return true } }) return actions.join('') }, solutionZoneCode(value) { let actions = [] Object.keys(this.zoneList).some(key => { if (this.zoneList[key].code === '' + value) { actions.push(this.zoneList[key].name) return true } }) return actions.join('') }, clearList() { this.dataSource = [] this.selectedRowKeys = [] this.ipagination.current = 1 } } } </script> <style scoped> @import '~@assets/less/common.less'; </style>