<template> <a-card :bordered="false" :class="'cust-erp-sub-tab'"> <!-- 操作按钮区域 --> <div class="table-operator" v-if="mainId"> <a-button v-has="'receiptDetail:add'" @click="handleAdd" type="primary" icon="plus">新增</a-button> <a-button v-has="'receiptDetail:export'" type="primary" icon="download" @click="handleExportXls('入库单详情')">导出</a-button> <a-button @click="batchPrint()" type="primary">打印</a-button> <a-upload v-has="'receiptDetail:import'" name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel"> <a-button type="primary" icon="import">导入</a-button> </a-upload> <a-dropdown v-if="selectedRowKeys.length > 0"> <a-menu slot="overlay" v-has="'receiptDetail:deleteBatch'"> <a-menu-item key="1" @click="batchDel"> <a-icon type="delete"/> 删除 </a-menu-item> </a-menu> <a-button style="margin-left: 8px"> 批量操作 <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> 已选择 <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" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" @change="handleTableChange"> <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="'receiptDetail:edit'" @click="edit(record)">编辑</a> <a-divider type="vertical"/> <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)"> <a v-has="'receiptDetail:delete'">删除</a> </a-popconfirm> </span> </a-table> </div> <receiptDetail-modal ref="modalForm" @ok="modalFormOk" :mainId="mainId"></receiptDetail-modal> <receipt-detail-edit-modal ref="modalEditForm" @ok="modalFormOk" :mainId="mainId"></receipt-detail-edit-modal> </a-card> </template> <script> import {JeecgListMixin} from '@/mixins/JeecgListMixin' import ReceiptDetailModal from './modules/ReceiptDetailModal' import ReceiptDetailEditModal from './modules/ReceiptDetailEditModal' export default { name: "ReceiptDetailList", mixins: [JeecgListMixin], components: {ReceiptDetailEditModal, ReceiptDetailModal}, props: { mainId: { type: String, default: '', required: false } }, watch: { mainId: { immediate: true, handler(val) { if (!this.mainId) { this.clearList() } else { this.queryParam['receiptId'] = 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: 'inventoryStatus_dictText', }, { title: '批次', align: "center", dataIndex: 'batch' }, { title: '单据状态', align: "center", dataIndex: 'status_dictText', }, { 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/receiptHeader/listReceiptDetailByMainId", delete: "/receipt/receiptHeader/deleteReceiptDetail", deleteBatch: "/receipt/receiptHeader/deleteBatchReceiptDetail", exportXlsUrl: "/receipt/receiptHeader/exportReceiptDetail", importUrl: "/receipt/receiptHeader/importReceiptDetail", }, dictOptions: { firstStatus: [], lastStatus: [], } } }, created() { }, computed: { importExcelUrl() { return `${window._CONFIG['domianURL']}/${this.url.importUrl}/${this.mainId}`; } }, methods: { clearList() { this.dataSource = [] this.selectedRowKeys = [] this.ipagination.current = 1 }, edit(record) { this.$refs.modalEditForm.edit(record); this.$refs.modalEditForm.title = "编辑"; this.$refs.modalEditForm.disableSubmit = false; }, batchPrint() { if (this.selectedRowKeys.length <= 0) { this.$message.warning('请选择一条记录!'); return; } else { var ids = ""; ids = this.selectedRowKeys[0]; window.open(window._CONFIG['domianURL'] + "/jmreport/view/797678301889273856/?id=" + ids, "newWindow", "toolbar=no,scrollbars=no,menubar=no,screenX=100,screenY=100"); } }, } } </script> <style scoped> @import '~@assets/less/common.less' </style>