<template> <a-card :bordered="false" :class="'cust-erp-sub-tab'"> <!-- 查询区域 --> <div class="table-page-search-wrapper"> <a-form layout="inline" @keyup.enter.native="searchQuery"> <a-row :gutter="24"> <a-col :xl="6" :lg="7" :md="8" :sm="24"> <a-form-item label="货主"> <a-select show-search placeholder="请选择货主" option-filter-prop="children" v-model="queryParam.companyCode"> <a-select-option v-for="item in companyList" :key="item.name" :value="item.code">{{ item.name }} </a-select-option> </a-select> </a-form-item> </a-col> <a-col :xl="6" :lg="7" :md="8" :sm="24"> <a-form-item label="物料编码"> <a-input placeholder="请输入物料编码" v-model="queryParam.materialCode"></a-input> </a-form-item> </a-col> <template v-if="toggleSearchStatus"> <a-col :xl="6" :lg="7" :md="8" :sm="24"> <a-form-item label="物料名称"> <a-input placeholder="请输入物料名称" v-model="queryParam.materialName"></a-input> </a-form-item> </a-col> <a-col :xl="6" :lg="7" :md="8" :sm="24"> <a-form-item label="库存状态"> <j-dict-select-tag placeholder="请选择库存状态" v-model="queryParam.inventoryStatus" dictCode="inventory_status"/> </a-form-item> </a-col> <a-col :xl="6" :lg="7" :md="8" :sm="24"> <a-form-item label="批次"> <a-input placeholder="请输入批次" v-model="queryParam.batch"></a-input> </a-form-item> </a-col> </template> <a-col :xl="6" :lg="7" :md="8" :sm="24"> <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> <a-button type="primary" @click="searchQuery" icon="search">查询</a-button> <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button> <a @click="handleToggleSearch" style="margin-left: 8px"> {{ toggleSearchStatus ? '收起' : '展开' }} <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/> </a> </span> </a-col> </a-row> </a-form> </div> <!-- 查询区域-END --> <!-- 操作按钮区域 --> <div class="table-operator" v-if="mainId"> <a-button @click="handleAdd" v-has="'receiptContainerDetail:add'" type="primary" icon="plus">新增</a-button> <a-button v-has="'receiptContainerDetail:export'" type="primary" icon="download" @click="handleExportXls('入库组盘详情')">导出</a-button> <a-upload v-has="'receiptContainerDetail:import'" name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel"> <a-button type="primary" icon="import">导入</a-button> </a-upload> </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> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a> 项 <a style="margin-left: 24px" @click="onClearSelected">清空</a> </div> --> <a-table ref="table" size="middle" bordered rowKey="id" :scroll="{x:true}" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" @change="handleTableChange"> <span slot="companyCode" slot-scope="companyCode"> <a-tag :key="companyCode" color=blue> {{ solutionCompany(companyCode) }} </a-tag> </span> <template slot="htmlSlot" slot-scope="text"> <div v-html="text"></div> </template> <template slot="imgSlot" slot-scope="text"> <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span> <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/> </template> <template slot="fileSlot" slot-scope="text"> <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span> <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)"> 下载 </a-button> </template> <span slot="action" slot-scope="text, record"> <a v-has="'receiptContainerDetail:edit'" @click="handleEdit(record)">编辑</a> <a-divider type="vertical"/> <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)"> <a v-has="'receiptContainerDetail:delete'">删除</a> </a-popconfirm> </span> </a-table> </div> <receiptContainerDetail-modal ref="modalForm" @ok="modalFormOk" :mainId="mainId"></receiptContainerDetail-modal> </a-card> </template> <script> import {JeecgListMixin} from '@/mixins/JeecgListMixin' import ReceiptContainerDetailModal from './modules/ReceiptContainerDetailModal' import {getCompanyList} from '@/api/api' export default { name: "ReceiptContainerDetailList", mixins: [JeecgListMixin], components: {ReceiptContainerDetailModal}, props: { mainId: { type: String, default: '', required: false } }, watch: { mainId: { immediate: true, handler(val) { if (!this.mainId) { this.clearList() } else { this.queryParam['receiptContainerId'] = val this.loadData(1); } } } }, data() { return { description: '入库组盘管理页面', disableMixinCreated: true, companyList: [], // 表头 columns: [ { title: '组盘详情ID', align: "center", dataIndex: 'id' }, { title: '货主', align: "center", dataIndex: 'companyCode', key: 'companyCode', scopedSlots: {customRender: 'companyCode'} }, { 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: 'inventoryStatus_dictText', }, { title: '批次', align: "center", dataIndex: 'batch' }, { title: '创建人', align: "center", dataIndex: 'createBy' }, { title: '创建日期', align: "center", dataIndex: 'createTime' }, { title: '更新人', align: "center", dataIndex: 'updateBy' }, { title: '更新日期', align: "center", dataIndex: 'updateTime' }, { title: '操作', dataIndex: 'action', align: "center", fixed: "right", width: 147, scopedSlots: {customRender: 'action'}, } ], url: { list: "/receipt/receiptContainerHeader/listReceiptContainerDetailByMainId", delete: "/receipt/receiptContainerHeader/deleteReceiptContainerDetail", deleteBatch: "/receipt/receiptContainerHeader/deleteBatchReceiptContainerDetail", exportXlsUrl: "/receipt/receiptContainerHeader/exportReceiptContainerDetail", importUrl: "/receipt/receiptContainerHeader/importReceiptContainerDetail", }, dictOptions: { taskType: [], status: [], } } }, created() { this.loadFrom(); }, computed: { importExcelUrl() { return `${window._CONFIG['domianURL']}/${this.url.importUrl}/${this.mainId}`; } }, methods: { clearList() { this.dataSource = [] this.selectedRowKeys = [] this.ipagination.current = 1 }, loadFrom() { getCompanyList().then((res) => { if (res.success) { this.companyList = res.result } }); }, solutionCompany(value) { var actions = [] Object.keys(this.companyList).some((key) => { if (this.companyList[key].code == ('' + value)) { actions.push(this.companyList[key].name) return true } }) return actions.join('') }, } } </script> <style scoped> @import '~@assets/less/common.less' </style>